/* global Highcharts */
define([], function () {
    var app = angular.module('App');
    app.factory('defineTheme', [
        function () {

            /** 根据属性列表,赋值新值 */
            function parseProperty(obj, newProperty, dotPropertyArrar) {
                dotPropertyArrar.forEach(function (dotPropertyStr) {
                    var propList = dotPropertyStr.split('.');
                    var item = obj;
                    for (var i = 0; i < propList.length - 1; i++) {
                        item = item[propList[i]];
                    }
                    item[propList[propList.length - 1]] = newProperty;
                });
            }

            var themes = {
                /** 重置主题 */
                resetTheme: function () {
                    Highcharts.themeDark = null;
                    var customTheme = themes.dark();
                    window.localStorage.removeItem('chartTheme');
                    Highcharts.setOptions(customTheme);
                    Highcharts.customTheme = customTheme;
                },
                /** 设置用户自定义的主题 */
                setCustomThemeOption: function (options) {
                    var customTheme = themes.custom();
                    for (var key in options) {
                        var item = options[key];
                        parseProperty(customTheme, item.color, item.bind);
                    }
                    window.localStorage.setItem('chartTheme', JSON.stringify(customTheme));
                    Highcharts.setOptions(customTheme);
                    Highcharts.customTheme = customTheme;
                },
                /** 获取用户自定义的主题 */
                getCustomThemeOption: function () {
                    var theme = themes.custom();
                    return {
                        backgroundColor: {
                            color: theme.chart.backgroundColor,
                            text: '图表背景色',
                            bind: ['chart.backgroundColor']
                        },
                        gridLineColor: {
                            color: theme.yAxis.gridLineColor,
                            text: '网格颜色',
                            bind: ['yAxis.gridLineColor']
                        },
                        axisColor: {
                            color: theme.yAxis.lineColor,
                            text: '坐标轴颜色',
                            bind: ['yAxis.lineColor', 'xAxis.lineColor']
                        },
                        tickColor: {
                            color: theme.yAxis.tickColor,
                            text: '刻度线颜色',
                            bind: ['yAxis.tickColor', 'xAxis.tickColor']
                        },
                        textColor: {
                            color: theme.title.style.color,
                            text: '文字颜色',
                            bind: ['title.style.color', 'xAxis.title.style.color', 'yAxis.title.style.color', 'xAxis.labels.style.color', 'yAxis.labels.style.color', 'plotOptions.line.dataLabels.color']
                        },
                        subTitleColor: {
                            color: theme.subtitle.style.color,
                            text: '初始值标注色',
                            bind: ['subtitle.style.color']
                        },
                        legendColor: {
                            color: theme.legend.itemStyle.color,
                            text: '图例颜色',
                            bind: ['legend.itemStyle.color', 'legend.itemHoverStyle.color']
                        },
                        legendHiddenColor: {
                            color: theme.legend.itemHiddenStyle.color,
                            text: '图例关闭颜色',
                            bind: ['legend.itemHiddenStyle.color']
                        },
                        series1Color: {
                            color: theme.colors[0],
                            text: '曲线一颜色',
                            bind: ['colors.0']
                        },
                        series2Color: {
                            color: theme.colors[1],
                            text: '曲线二颜色',
                            bind: ['colors.1']
                        },
                        series3Color: {
                            color: theme.colors[2],
                            text: '曲线三颜色',
                            bind: ['colors.2']
                        },
                        series4Color: {
                            color: theme.colors[3],
                            text: '曲线四颜色',
                            bind: ['colors.3']
                        }
                    };
                },
                custom: function () {
                    if (!Highcharts.customTheme) {
                        var customTheme = window.localStorage.getItem('chartTheme');
                        if (!customTheme) {
                            customTheme = themes.dark();
                        } else {
                            customTheme = JSON.parse(customTheme);
                        }
                        Highcharts.customTheme = customTheme;
                    }
                    Highcharts.setOptions(Highcharts.customTheme);
                    return Highcharts.customTheme;
                },
                dark: function () {
                    if (!Highcharts.themeDark) {
                        Highcharts.themeDark = {
                            colors: ["#E63628", "#71B7DD", "#FFD455", "#49B159", "#ff0066", "#AAEEEE", "#A3FC4F", "#eeaaee", "#F4F78D", "#0B87D1"],
                            chart: {
                                style: {
                                    fontFamily: '"Microsoft Yahei", Verdana', // default font
                                    fontSize: '11px'
                                },
                                borderColor: "transparent",
                                borderWidth: 1,
                                className: 'dark-container',
                                plotBackgroundColor: 'transparent',
                                plotBorderColor: 'transparent',
                                plotBorderWidth: 1,
                                spacing: [10, 10, 10, 10],
                                margin: [10, 10, 35, 250],
                                backgroundColor: "transparent",
                            },
                            title: {
                                align: 'left',
                                x: 40,
                                style: {
                                    color: "#eee",
                                    fontSize: "16",
                                    fontWeight: 800
                                }
                            },
                            subtitle: {
                                align: 'right',
                                useHTML: true,
                                style: {
                                    fontSize: "12px",
                                    fontWeight: 300,
                                    color: "#F9FF00",
                                    fontFamily: '"Microsoft Yahei"', // default font
                                },
                            },
                            xAxis: {
                                gridLineColor: "#fff",
                                gridLineWidth: 0,
                                tickLength: 4,
                                tickmarkPlacement: 'on',
                                labels: {
                                    staggerLines: 1,
                                    style: {
                                        color: '#eee'
                                    },
                                },
                                lineColor: '#999',
                                tickColor: '#ddd',
                                title: {
                                    style: {
                                        color: '#CCC',
                                        fontWeight: 'bold',
                                        fontSize: '12px',
                                        fontFamily: 'Verdana, sans-serif'

                                    }
                                }
                            },
                            yAxis: {
                                lineWidth: 1,
                                tickLength: 4,
                                gridLineColor: "#393939",
                                lineColor: '#999',
                                labels: {
                                    x: -10,
                                    style: {
                                        color: '#eee'
                                    }
                                },
                                minorTickInterval: null,
                                tickColor: '#A0A0A0',
                                minorTickColor: "#A0A0A0",
                                minorGridLineColor: "#2d2d2d",
                                tickWidth: 1,
                                title: {
                                    style: {
                                        color: '#CCC',
                                        fontWeight: 'bold',
                                        fontSize: '12px',
                                        fontFamily: 'Verdana, sans-serif'
                                    }
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0, 0, 0, 0.75)',
                                style: {
                                    color: '#F0F0F0'
                                }
                            },
                            toolbar: {
                                itemStyle: {
                                    color: 'silver'
                                }
                            },
                            plotOptions: {
                                line: {
                                    lineWidth: 2,
                                    dataLabels: {
                                        color: "#fff",
                                        allowOverlap: true,
                                        useHTML: true,
                                        zIndex: 999,
                                    },
                                    marker: {
                                        enabled: true,
                                        lineWidth: 0,
                                        lineColor: "transparent"
                                    }
                                },
                                spline: {
                                    marker: {
                                        lineColor: '#333'
                                    }
                                },
                                scatter: {
                                    marker: {
                                        lineColor: '#333'
                                    }
                                },
                                candlestick: {
                                    lineColor: 'white'
                                }
                            },
                            legend: {
                                align: 'right',
                                verticalAlign: 'top',
                                floating: true,
                                borderWidth: 0,
                                y: -6,
                                itemHoverStyle: {
                                    color: '#FFF'
                                },
                                itemHiddenStyle: {
                                    color: '#70706D'
                                },
                                itemStyle: {
                                    font: '9pt Verdana, sans-serif',
                                    color: '#ddd'
                                },
                            },
                            exporting: {
                                enabled: false,
                                allowHTML: true
                            },
                            credits: {
                                enabled: false,
                            },
                            labels: {
                                style: {
                                    color: '#CCC'
                                }
                            },
                            navigation: {
                                buttonOptions: {
                                    symbolStroke: '#DDDDDD',
                                    hoverSymbolStroke: '#FFFFFF',
                                    theme: {
                                        fill: {
                                            linearGradient: {
                                                x1: 0,
                                                y1: 0,
                                                x2: 0,
                                                y2: 1
                                            },
                                            stops: [
                                                [0.4, '#606060'],
                                                [0.6, '#333333']
                                            ]
                                        },
                                        stroke: '#000000'
                                    }
                                }
                            },
                            // special colors for some of the
                            legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
                            // background2: 'rgb(35, 35, 70)',
                            // // dataLabelsColor: 'rgba(255,255,255,0.2)',
                            // textColor: '#C0C0C0',
                            // maskColor: 'rgba(255,255,255,0.3)'
                        };
                    }
                    // Apply the theme
                    Highcharts.setOptions(Highcharts.themeDark);
                    return Highcharts.themeDark;
                },
                light: function () {
                    if (!Highcharts.themeLight) {
                        Highcharts.themeLight = { //'#00B3F7', '#E94E51'
                            colors: ['#E7505A', '#2991D9', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                            chart: {
                                backgroundColor: "transparent",
                                borderColor: 'transparent',
                                borderWidth: 0,
                                borderRadius: 0,
                                plotBackgroundColor: 'transparent',
                                plotBorderColor: 'transparent',
                                style: {
                                    fontFamily: '"Microsoft Yahei", Verdana', // default font
                                    fontSize: '11px'
                                },
                                spacing: [0, 10, 0, 0],
                                margin: [10, 10, 20, 15]
                            },
                            tooltip: {
                                backgroundColor: 'rgba(248, 248, 248, 0.9)',
                                style: {
                                    color: '#222'
                                }
                            },
                            exporting: {
                                enabled: false
                            },
                            credits: {
                                enabled: false
                            },
                            title: {
                                align: 'left',
                                style: {
                                    color: "#777",
                                    fontSize: "16",
                                    fontWeight: 800
                                }
                            },
                            subtitle: {
                                align: 'right',
                                useHTML: true,
                                style: {
                                    fontSize: "12px",
                                    fontWeight: 300,
                                    color: "#555",
                                    fontFamily: '"Microsoft Yahei"', // default font
                                }
                            },
                            xAxis: {
                                gridLineWidth: 0,
                                labels: {
                                    style: {
                                        color: '#444',
                                        font: '12px'
                                    },
                                    staggerLines: 1
                                },
                                tickmarkPlacement: 'on',
                                lineColor: '#d9d9d9',
                                tickLength: 4,
                                title: {
                                    style: {
                                        color: '#717461',
                                        fontSize: '12px',
                                        fontFamily: '"Microsoft Yahei" , Verdana'

                                    }
                                }
                            },
                            yAxis: {
                                lineWidth: 1,
                                tickLength: 4,
                                gridLineColor: "#f3f3f3",
                                lineColor: '#d9d9d9',
                                title: {
                                    text: ''
                                },
                                minorTickInterval: null,
                                tickWidth: 1,
                                labels: {
                                    x: -3,
                                    style: {
                                        color: '#444',
                                        font: '12px'
                                    }
                                }
                            },
                            plotOptions: {
                                line: {
                                    lineWidth: 1,
                                    animation: true,
                                    marker: {
                                        radius: 2
                                    },
                                    dataLabels: {
                                        enabled: true,
                                        allowOverlap: true,
                                        color: "#333",
                                        useHTML: true,
                                        zIndex: 999
                                    }
                                }
                            },
                            legend: {
                                align: 'right',
                                verticalAlign: 'top',
                                floating: true,
                                borderWidth: 0,
                                y: 6,
                                itemHoverStyle: {
                                    color: '#222'
                                },
                                itemHiddenStyle: {
                                    color: '#ddd'
                                },
                                itemStyle: {
                                    font: '9pt Verdana, sans-serif',
                                    color: '#444'
                                },
                            },
                            labels: {
                                style: {
                                    color: '#99b'
                                }
                            }
                        };
                    }
                    // Apply the theme
                    Highcharts.setOptions(Highcharts.themeLight);
                }
            };
            return themes;
        }
    ]);
});
